import React, { PureComponent } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import Style from '../utils/style/style'
import Icon from 'react-native-vector-icons/FontAwesome'

export default class CheckStateItem extends PureComponent {
    constructor(props) {
        super(props)
    }

    render() {
        const { item, pressItem, noBorder, showAngle } = this.props;
        const iconSize = 17;
        return (
            <TouchableOpacity style={[styles.container]} onPress={pressItem}>
                <View style={[styles.wrapper, noBorder ? styles.noBorder : '']}>
                    <Icon name={item.iconName} size={item.iconSize ? item.iconSize : iconSize} color={item.color} />
                    <View style={styles.textWrap}>
                        <View><Text style={[Style.f17, Style.colorBlack]}>{item.title}</Text></View>
                        <View style={Style.ml5}><Text style={[Style.f12, Style.color999]}>{item.desc}</Text></View>
                    </View>
                    <View style={[Style.dfr,Style.aic]}>
                        <View><Text style={[Style.f17, { color: item.color }]}>{item.value}</Text></View>
                        {
                            !showAngle ? null :
                                <View style={[styles.angleRight, Style.aic, Style.jsfa]}>
                                    <View style={[styles.icon]}>
                                        <Icon name="angle-right" size={30}></Icon>
                                    </View>
                                </View>
                        }
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: Style.width,
        height: 49,
    },
    wrapper: {
        marginLeft: 10,
        paddingRight: 10,
        width: Style.width - 20,
        borderStyle: 'solid',
        borderColor: '#e5e5e5',
        borderBottomWidth: 1,
        flex:1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    noBorder: {
        borderBottomWidth: 0
    },
    textWrap: {
        flex: 1,
        flexDirection:'row',
        alignItems:'center',
        paddingRight: 10,
        paddingLeft: 10,

    },
    angleRight: {
        margin: 0,
        width: 20,
    },
    icon: {
        marginLeft: 10
    },
    iconText: {
        fontSize: 13,
        marginLeft: 3
    }
})